<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.cssHooks</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/css/">CSS</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.cssHooks/" target="_blank">jQuery.cssHooks</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry property" id="jQuery-cssHooks1"><h2 class="section-title">
<span>jQuery.cssHooks</span><span class="returns">返回: <a href="/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，目的是为了标准化 CSS 属性名或创建自定义属性。
			</p>
<ul class="signatures"><li class="signature"><h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>jQuery.cssHooks</h4></li></ul>
<div class="longdesc" id="entry-longdesc">
<p><code>$.cssHooks</code> 对象提供了一种方法通过定义函数来获取和设置特定的CSS值的方法。
			 它也可以被用来创建新的cssHooks以标准化CSS3功能，如框阴影和渐变。</p>
<p>例如，某些版本基于Webkit的浏览器需要<code>-webkit-border-radius</code>属性来设置元素的<code>border-radius</code>，而早期的Firefox版本使用<code>-moz-border-radius</code>属性。一个CSS hook 可以标准化这些供应商前缀的属性，让<code>.css()</code> 接受一个单一的，标准的属性的名称（<code>border-radius</code>，或用DOM属性的语法，<code>borderRadius</code>）。</p>
<p>除了提供了对特定样式的处理可以采用更加细致的控制外，
			 <code>$.cssHooks</code>也扩展了<code>.animate()</code> 方法上可用的属性。</p>
<p>定义一个新的css hook十分简单。下面的模板可以方便您创建自己的 cssHook：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code>  <span class="comment">// first, check to see if cssHooks are supported</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">if</span> ( !$.cssHooks ) {</code></div></div><div class="container"><div class="line"><code>    <span class="comment">// if not, output an error message</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">throw</span>(<span class="string">"jQuery 1.4.3 or above is required for this plugin to work"</span>);</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="comment">// Wrap in a document ready call, because jQuery writes</span></code></div></div><div class="container"><div class="line"><code>  <span class="comment">// cssHooks at this time and will blow away your functions</span></code></div></div><div class="container"><div class="line"><code>  <span class="comment">// if they exist.</span></code></div></div><div class="container"><div class="line"><code>  $(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $.cssHooks[<span class="string">"someCSSProp"</span>] = {</code></div></div><div class="container"><div class="line"><code>      get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code>        <span class="comment">// handle getting the CSS property</span></code></div></div><div class="container"><div class="line"><code>      },</code></div></div><div class="container"><div class="line"><code>      set: <span class="keyword">function</span>( elem, value ) {</code></div></div><div class="container"><div class="line"><code>        <span class="comment">// handle setting the CSS value</span></code></div></div><div class="container"><div class="line"><code>      }</code></div></div><div class="container"><div class="line"><code>    };</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="feature-testing">Feature Testing（功能测试）</h4>
<p>
			    	在使供应商特定的CSS属性标准化前，首先要确定浏览器是否支持标准的属性 或 带浏览器供应商前缀的变种。例如，检查支持<code>border-radius</code> 属性，还要检查该属性的任何变种写法是否是临时元素的 <code>style</code> 对象中的成员。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code>  <span class="function"><span class="keyword">function</span> <span class="title">styleSupport</span><span class="params">( prop )</span> {</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> vendorProp, supportedProp,</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>        <span class="comment">// capitalize first character of the prop to test vendor prefix</span></code></div></div><div class="container"><div class="line"><code>        capProp = prop.charAt(<span class="number">0</span>).toUpperCase() + prop.slice(<span class="number">1</span>),</code></div></div><div class="container"><div class="line"><code>        prefixes = [ <span class="string">"Moz"</span>, <span class="string">"Webkit"</span>, <span class="string">"O"</span>, <span class="string">"ms"</span> ],</code></div></div><div class="container"><div class="line"><code>        div = document.createElement( <span class="string">"div"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="keyword">if</span> ( prop <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>      <span class="comment">// browser supports standard CSS property name</span></code></div></div><div class="container"><div class="line"><code>      supportedProp = prop;</code></div></div><div class="container"><div class="line"><code>    } <span class="keyword">else</span> {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>      <span class="comment">// otherwise test support for vendor-prefixed property names</span></code></div></div><div class="container"><div class="line"><code>      <span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i &lt; prefixes.length; i++ ) {</code></div></div><div class="container"><div class="line"><code>        vendorProp = prefixes[i] + capProp;</code></div></div><div class="container"><div class="line"><code>        <span class="keyword">if</span> ( vendorProp <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code>          supportedProp = vendorProp;</code></div></div><div class="container"><div class="line"><code>          <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>        }</code></div></div><div class="container"><div class="line"><code>      }</code></div></div><div class="container"><div class="line"><code>    }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="comment">// avoid memory leak in IE</span></code></div></div><div class="container"><div class="line"><code>    div = <span class="literal">null</span>;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="comment">// add property to $.support so it can be accessed elsewhere</span></code></div></div><div class="container"><div class="line"><code>    $.support[ prop ] = supportedProp;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span> supportedProp;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="comment">// call the function, e.g. testing for "border-radius" support:</span></code></div></div><div class="container"><div class="line"><code>  styleSupport( <span class="string">"borderRadius"</span> );</code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="defining-complete-csshook">Defining a complete css hook（定义一个完整的css hook）</h4>
<p>要定义一个完整的cssHook，首先我们需要测试您当前使用的 jQuery 版本是否支持 cssHooks 方法，此外，还要结合上面提到的例子：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">if</span> ( !$.cssHooks ) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">throw</span>(<span class="string">"jQuery 1.4.3+ is needed for this plugin to work"</span>);</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="function"><span class="keyword">function</span> <span class="title">styleSupport</span><span class="params">( prop )</span> {</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> vendorProp, supportedProp,</code></div></div><div class="container"><div class="line"><code>        capProp = prop.charAt(<span class="number">0</span>).toUpperCase() + prop.slice(<span class="number">1</span>),</code></div></div><div class="container"><div class="line"><code>        prefixes = [ <span class="string">"Moz"</span>, <span class="string">"Webkit"</span>, <span class="string">"O"</span>, <span class="string">"ms"</span> ],</code></div></div><div class="container"><div class="line"><code>        div = document.createElement( <span class="string">"div"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="keyword">if</span> ( prop <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code>      supportedProp = prop;</code></div></div><div class="container"><div class="line"><code>    } <span class="keyword">else</span> {</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">for</span> ( <span class="keyword">var</span> i = <span class="number">0</span>; i &lt; prefixes.length; i++ ) {</code></div></div><div class="container"><div class="line"><code>        vendorProp = prefixes[i] + capProp;</code></div></div><div class="container"><div class="line"><code>        <span class="keyword">if</span> ( vendorProp <span class="keyword">in</span> div.style ) {</code></div></div><div class="container"><div class="line"><code>          supportedProp = vendorProp;</code></div></div><div class="container"><div class="line"><code>          <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>        }</code></div></div><div class="container"><div class="line"><code>      }</code></div></div><div class="container"><div class="line"><code>    }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    div = <span class="literal">null</span>;</code></div></div><div class="container"><div class="line"><code>    $.support[ prop ] = supportedProp</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">return</span> supportedProp;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> borderRadius = styleSupport( <span class="string">"borderRadius"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="comment">// Set cssHooks only for browsers that</span></code></div></div><div class="container"><div class="line"><code>  <span class="comment">// support a vendor-prefixed border radius</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">if</span> ( borderRadius &amp;&amp; borderRadius !== <span class="string">"borderRadius"</span> ) {</code></div></div><div class="container"><div class="line"><code>    $.cssHooks.borderRadius = {</code></div></div><div class="container"><div class="line"><code>      get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code>        <span class="keyword">return</span> $.css( elem, borderRadius );</code></div></div><div class="container"><div class="line"><code>      },</code></div></div><div class="container"><div class="line"><code>      set: <span class="keyword">function</span>( elem, value) {</code></div></div><div class="container"><div class="line"><code>        elem.style[ borderRadius ] = value;</code></div></div><div class="container"><div class="line"><code>      }</code></div></div><div class="container"><div class="line"><code>    };</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
			
			    然后，您可以在支持的浏览器中使用DOM（驼峰）样式或CSS（连字符号）的风格设置边框半径：
			</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"#element"</span>).css(<span class="string">"borderRadius"</span>, <span class="string">"10px"</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#another"</span>).css(<span class="string">"border-radius"</span>, <span class="string">"20px"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果浏览器不支持任何形式的CSS属性写法，并且也不支持任何前缀写法，那么该样式是不会应用到元素上的。但是，如果浏览器支持某种特殊的写法，那么可以在 cssHooks 中添加对该特殊用法的支持。
			
			 </p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code> (<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code>  <span class="comment">// feature test for support of a CSS property</span></code></div></div><div class="container"><div class="line"><code>  <span class="comment">// and a proprietary alternative</span></code></div></div><div class="container"><div class="line"><code>  <span class="comment">// ...</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="keyword">if</span> ( $.support.someCSSProp &amp;&amp; $.support.someCSSProp !== <span class="string">"someCSSProp"</span> ) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="comment">// Set cssHooks for browsers that</span></code></div></div><div class="container"><div class="line"><code>    <span class="comment">// support only a vendor-prefixed someCSSProp</span></code></div></div><div class="container"><div class="line"><code>    $.cssHooks.someCSSProp = {</code></div></div><div class="container"><div class="line"><code>      get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code>        <span class="keyword">return</span> $.css( elem, $.support.someCSSProp );</code></div></div><div class="container"><div class="line"><code>      },</code></div></div><div class="container"><div class="line"><code>      set: <span class="keyword">function</span>( elem, value) {</code></div></div><div class="container"><div class="line"><code>        elem.style[ $.support.someCSSProp ] = value;</code></div></div><div class="container"><div class="line"><code>      }</code></div></div><div class="container"><div class="line"><code>    };</code></div></div><div class="container"><div class="line"><code>  } <span class="keyword">else</span> <span class="keyword">if</span> ( supportsProprietaryAlternative ) {</code></div></div><div class="container"><div class="line"><code>    $.cssHooks.someCSSProp = {</code></div></div><div class="container"><div class="line"><code>      get: <span class="keyword">function</span>( elem, computed, extra ) {</code></div></div><div class="container"><div class="line"><code>        <span class="comment">// Handle crazy conversion from the proprietary alternative</span></code></div></div><div class="container"><div class="line"><code>      },</code></div></div><div class="container"><div class="line"><code>      set: <span class="keyword">function</span>( elem, value ) {</code></div></div><div class="container"><div class="line"><code>        <span class="comment">// Handle crazy conversion to the proprietary alternative</span></code></div></div><div class="container"><div class="line"><code>      }</code></div></div><div class="container"><div class="line"><code>    }</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>})(jQuery);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="special-units">Special units（特殊单位）</h4>
<p>
			    	默认情况下，传递给<code>.css()</code> 方法的值，jQuery添加一个“px”单位。可以通过<code>jQuery.cssNumber</code>对象中添加属性的方法，来防止这种行为的发生</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.cssNumber[<span class="string">"someCSSProp"</span>] = <span class="literal">true</span>;</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="animating">Animating with cssHooks（cssHooks动画）</h4>
<p>通过向 <code>jQuery.fx.step</code> 对象中添加属性，cssHook 同样可以向 jQuery 的动画机制中添加钩子：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.fx.step[<span class="string">"someCSSProp"</span>] = <span class="keyword">function</span>(fx){</code></div></div><div class="container"><div class="line"><code>  $.cssHooks[<span class="string">"someCSSProp"</span>].set( fx.elem, fx.now + fx.unit );</code></div></div><div class="container"><div class="line"><code>};</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>注意，上述这种用法应用于简单的数值属性的动画是最好的。根据不同的 CSS 属性，返回值的类型以及动画的复杂性，可能需要在 cssHooks 写更多的代码。</p>
</div>
</div></article> </div>
</article>